<!DOCTYPE html>
<html xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" th:href="@{/css/AdminLTE.min.css}"/>
    <link rel="stylesheet" th:href="@{/js/datatables/jquery.dataTables.min.css}"/>
    <link href="http://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/js/pace/pace.min.css}"/>
    <link rel="stylesheet" th:href="@{/js/icheck/red.css}"/>
    <link rel="stylesheet" th:href="@{/css/toastr.css}"/>
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
    <link rel="stylesheet" th:href="@{/css/skin-blue.css}"/>
    <link rel="stylesheet" th:href="@{/css/model-right.css}"/>
    <link rel="stylesheet" th:href="@{/css/tab-style.css}"/>
</head>
<body class="skin-blue sidebar-mini">
<div layout:fragment="modal"></div>
<div class="wrapper">
    <div th:replace="fragments/header :: main"></div>
    <aside class="main-sidebar" layout:fragment="sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar" style="height: auto;">
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li class="controller" >
                    <a >
                        <i class="fa fa-dashboard"></i> <span>控制台</span>
                        <span class="pull-right-container"></span>
                    </a>
                </li>
                <li th:classappend="${index == 'home'} ? 'active'">
                    <a th:href="@{/}">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                        <span class="pull-right-container"></span>
                    </a>
                </li>
                <li class="treeview" th:classappend="${index == 'admin'} ? 'active'">
                    <a href="#">
                        <i class="fa   fa-user-secret"></i><span>管理员管理</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-down pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li  th:classappend="${son == 'list'} ? 'active'"><a
                                th:href="@{/admins}"><i
                                class="fa fa-circle-o"  style="visibility: hidden"></i>管理员列表</a></li>
                        <li  th:classappend="${son == 'role'} ? 'active'"><a
                                th:href="@{/admins/roles}"><i
                                class="fa fa-circle-o"style="visibility: hidden"></i>权限组</a></li>
                    </ul>
                </li>
                <li class="treeview" th:classappend="${index == 'good'} ? 'active'">
                    <a href="#">
                        <i class="fa   fa-user-secret"></i><span>商品管理</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-down pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li  th:classappend="${son == 'list'} ? 'active'"><a
                                th:href="@{/goods}"><i
                                class="fa fa-circle-o"  style="visibility: hidden"></i>商品管理</a></li>
                        <li  th:classappend="${son == 'category'} ? 'active'"><a
                                th:href="@{/goods/category}"><i
                                class="fa fa-circle-o"style="visibility: hidden"></i>品类管理</a></li>
                        <li  th:classappend="${son == 'sku'} ? 'active'"><a
                                th:href="@{/goods/sku}"><i
                                class="fa fa-circle-o"style="visibility: hidden"></i>SKU属性管理</a></li>
                        <li  th:classappend="${son == 'brand'} ? 'active'"><a
                                th:href="@{/goods/brand}"><i
                                class="fa fa-circle-o"style="visibility: hidden"></i>品牌管理</a></li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <div class="content-wrapper">
        <div layout:fragment="content">
            主题内容
        </div>
    </div>

    <aside class="control-sidebar control-sidebar-light">
        <div class="pad">
            这是控制侧边栏的一个例子。
        </div>
    </aside>
    <div class="control-sidebar-bg" ></div>

</div>

<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/app.min.js}"></script>
<script src="http://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript" th:src="@{/js/datatables/jquery.dataTables.js}"></script>
<script type="text/javascript" th:src="@{/js/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{/js/pace/pace.min.js}"></script>
<script type="text/javascript" th:src="@{/js/util.js}"></script>
<script type="text/javascript">
    function logout() {
        $.ajax({
            url: "/logout",
            type: "post",
            success: function (data) {
                location.reload(true);
            }
        })
    }

    $(document).ready(function () {
        $('#logout').on('click', function (e) {
            e.preventDefault();
            logout();
        })
    })
    $(document).ajaxStart(function () {     //进度条
        Pace.restart();
    })
</script>
<div layout:fragment="js"></div>
</body>
</html>